<template>
  <div>
    <div class="center-w">
      <div class="iphone">
        <div class="iphone-top">
          <span class="camera"></span>
          <span class="sensor"></span>
          <span class="speaker"></span>
        </div>
        <div class="top-bar"></div>
        <div class="iphone-screen" style="position: relative;">
          <img
            src="https://applet.atptest.com/yadvevhr1685944422500.png"
            alt=""
          />

          <img
            style=" margin-top: -5px"
            :src="ruleForm.backImg + '?v=' + +new Date().getTime()"
            alt=""
          />
          <img
            style="position: absolute;bottom: 0; left: 0;"
            src="https://applet.atptest.com/YQufplKs1685945360114.png"
            alt=""
          />
        </div>
        <div class="buttons">
          <span class="on-off"></span>
          <span class="sleep"></span>
          <span class="up"></span>
          <span class="down"></span>
        </div>
        <div class="bottom-bar"></div>
        <div class="iphone-bottom">
          <span></span>
        </div>
      </div>
      <el-card style="width: 400px;">
        <div style="text-align: center;">
          <upload-img
            :isShowTip="true"
            :limit="1"
            :isHomeImg="true"
            :fileType="types"
            :value="ruleForm.backImg"
            @input="uploadImgBack($event)"
          />
          <div
            style="margin-top: 20px; font-weight: 700; color: #f70707; font-size: 12px;"
          >
            最佳尺寸1097*1741
          </div>
          <div style="margin: 10px 0; font-weight: 700; font-size: 14px;">
            模拟手机图片效果只做参考。
          </div>
          <a
            href="https://applet.atptest.com/pccshomeimage.jpg"
            target="_blank"
            rel="noopener noreferrer"
            >https://applet.atptest.com/pccshomeimage.jpg</a
          >
          <el-button style="margin-top: 10px;" size="mini" type="success"
            >确认提交</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import uploadImg from "../../components/uploadImg";

export default {
  data() {
    return {
      ruleForm: {
        backImg: "https://applet.atptest.com/pccshomeimage.jpg"
      },
      types: ["jpg"]
    };
  },
  components: {
    uploadImg //上传图片
  },

  created() {},

  methods: {
    // 上传图片的回调
    uploadImgBack(x) {
      if (x && x.length > 0) this.ruleForm.backImg = x[0].url;
      if (x.length == 0) {
        this.ruleForm.backImg = "";
      }
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #fff;
  /* min-height: 1150px; */
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
  height: 80vh;
  .title {
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* 样式1 */
  .iphone {
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999,
      0 0 30px 0px rgba(0, 0, 0, 0.7);
    border: 5px solid #d9dbdc;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 50px;
    height: 837px;
    width: 423px;
    position: relative;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  .iphone-top {
    padding: 5px 110px 40px;
    position: relative;
  }
  .iphone-top .speaker {
    display: block;
    width: 70px;
    height: 6px;
    margin: 0 auto;
    border-radius: 6px;
    background: #292728;
  }
  .iphone-top .camera {
    display: block;
    margin: 0 auto;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-bottom: 13px;
    background: #333;
  }
  .iphone-top .sensor {
    display: block;
    width: 15px;
    height: 15px;
    float: left;
    background: #333;
    margin-top: -5px;
    border-radius: 50%;
  }
  .iphone .top-bar,
  .iphone .bottom-bar {
    display: block;
    width: 423px;
    height: 15px;
    border-left: 5px solid #bbb;
    border-right: 5px solid #bbb;
    position: absolute;
    left: -5px;
  }
  .iphone .top-bar {
    top: 65px;
  }
  .iphone .bottom-bar {
    bottom: 65px;
  }
  .iphone-screen {
    position: relative;
    background: #eee;
    border: 1px solid #fff;
    height: 677px;
    width: 375px;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    overflow: hidden;
  }

  .iphone-screen-s {
    position: relative;
    background: #eee;
    border: 1px solid #fff;
    height: 655px;
    width: 340px;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 0, 0.9);
    border-radius: 30px;
    overflow: hidden;
  }
  .iphone-screen img {
    width: 100%;
  }

  .iphone-screen-s img {
    width: 100%;
  }
  .iphone .buttons .on-off,
  .iphone .buttons .up,
  .iphone .buttons .down,
  .iphone .buttons .sleep {
    display: block;
    background: #ccc;
    position: absolute;
    border-radius: 2px 0px 0px 2px;
  }
  .iphone .buttons .on-off {
    height: 40px;
    width: 3px;
    top: 100px;
    left: -8px;
  }
  .iphone .buttons .up,
  .iphone .buttons .down,
  .iphone .buttons .sleep {
    height: 60px;
    width: 5px;
    left: -10px;
  }
  .iphone .buttons .up {
    top: 170px;
  }
  .iphone .buttons .down {
    top: 250px;
  }
  .iphone .buttons .sleep {
    left: auto;
    right: -10px;
    top: 170px;
    border-radius: 0px 2px 2px 0px;
  }
  .iphone-bottom {
    padding: 10px 0 0;
  }
  .iphone-bottom span {
    display: block;
    margin: 0 auto;
    width: 68px;
    height: 68px;
    background: #ccc;
    border-radius: 50%;
    background: -webkit-linear-gradient(
      315deg,
      #303233 0%,
      #b5b7b9 50%,
      #f0f2f2 69%,
      #303233 100%
    );
    background: linear-gradient(
      135deg,
      #303233 0%,
      #b5b7b9 50%,
      #f0f2f2 69%,
      #303233 100%
    );
    position: relative;
  }
  .iphone-bottom span:after {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
  }
}
</style>
